<template>
  <div class="container">
    <!-- 卡片视图 -->
    <el-card class="card">
      <!-- 顶部搜索框 -->
      <el-form :model="form" label-width="80px">
        <el-form-item label="活动名称">
          <el-input v-model="form.name" class="seach"></el-input>
          <!-- 俩个按钮 -->
          <el-button type="primary" size="small" class="btn1">搜索</el-button>
          <el-button size="small" class="btn2">清除</el-button>
        </el-form-item>
      </el-form>
      <!-- 提示数据的杠杠 -->
      <el-alert type="info" show-icon :closable="kaiguan"
        >数据一共{{ counts }}条
      </el-alert>

      <el-table :data="questionslist" class="table">
        <el-table-column type="index"></el-table-column>
        <el-table-column label="编号" prop="id" width="200px"></el-table-column>
        <el-table-column label="题型" prop="questionType" width="90px">
          <template slot-scope="scope">
            <span v-if="scope.row.questionType === '1'">简答</span>
            <span v-else-if="scope.row.questionType === '2'">单选</span>
            <span v-else>多选</span>
          </template>
        </el-table-column>
        <el-table-column label="题目编号" width="188px">
          <template slot-scope="scope">
            <span
              v-for="(item, index) in scope.row.questionIDs"
              :key="index"
              style="display: block"
              class=""
              >{{ item.number }}</span
            >
          </template>
        </el-table-column>
        <el-table-column
          label="录入时间"
          prop="addTime"
          width="160px"
        ></el-table-column>
        <el-table-column
          label="答题时间(s)"
          prop="totalSeconds"
        ></el-table-column>
        <el-table-column
          label="正确率(%)"
          prop="accuracyRate"
        ></el-table-column>
        <el-table-column label="录入人" prop="userName"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              class="btn"
              type="danger"
              icon="el-icon-delete"
              circle
              size="small"
              @click="open(scope.row)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页部分 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="querInfo.page"
        :page-sizes="[20, 30, 50, 80]"
        :page-size="querInfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="counts"
      >
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
// 获取封装的接口
import { randoms, removeRandoms } from "../../api/hmmm/questions";
export default {
  data() {
    return {
      // 查询条件
      querInfo: {
        // type: 3,
        // 当前页数
        page: 1,
        //  当前页数显示的数量
        pagesize: 20,
      },
      // 获取的组题列表数据
      questionslist: [],
      form: {
        name: "",
      },
      kaiguan: false,
      tableData: [
        {
          data: "",
        },
      ],
      // 总数据条数
      counts: 0,
    };
  },
  // 在生命周期中调用函数
  created() {
    this.getlist();
  },
  // 事件函数
  methods: {
    async getlist() {
      const { data: res } = await randoms(this.querInfo);
      //  if(res.meta.status !== 200){
      //    return this.$message.error('获取组题列表失败')
      //  }
      this.questionslist = res.items;
      this.counts = res.counts;
      // this.querInfo.pagesize = res.pagesizes
      // this.querInfo.page = res.pages
      console.log(res);
    },
    // 监听 pagesize 改变 每页显示多少条数据的
    handleSizeChange(newSize) {
      this.querInfo.pagesize = newSize;
      console.log(this.querInfo.pagesize);
      console.log("111");
      this.getlist();
    },
    // 监听 pagenum 改变
    handleCurrentChange(newPage) {
      this.querInfo.page = newPage;
      console.log(this.querInfo.page);
      this.getlist();
    },
    async open(val) {
    
      const confirmResilt = await this.$confirm(
        "此操作将永久删除该文件, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).catch((err) => err);
      // 取消了删除按钮
      if (confirmResilt !== "confirm") {
        return this.$message.info("取消删除");
      }
      // 确认了删除按钮
      // const {data:res} = await removeRandoms()
      const {data:res} = await removeRandoms(val)
      // console.log(res);
      this.getlist()
      
      
      // if(res.meta.status !== 200){
      //   return this.$message('删除参数失败')
      // }
      // this.$message.success('删除参数成功')
      // 刷新一下页面
      // this.getlist()
    },
  },
};
</script>   

<style scoped lang='less'>
.card {
  margin: 20px;
  .seach {
    width: 200px;
  }
  .btn1 {
    float: right;
  }
  .btn2 {
    float: right;
    margin-right: 10px;
  }
}
.btn {
  background-color: #fef0f0;
  color: #f78181;
}
.table {
  margin-top: 20px;
}
</style>
